<template>
    <div>
        <Header></Header>

    <el-main style="width:1200px; overflow:hidden; margin:0 auto">
        <comments-item
                v-for="comment in comments"
                :key="comment.id"
                :avatar="comment.user.avatar"
                :author="comment.user.name"
                :content="comment.content"
                :time="comment.created"
                :hasReply="replys[comment.id] && replys[comment.id].length > 0"
                @clickAvatar="handleClickAvatar(comment)"
                @clickAuthor="handleClickAuthor(comment)"
                @deleteComments="handleDeleteComments(comment)"
                @deleteReply="handleDeleteReply(comment)"
                @addReply="handleAddReply(comment)">
            <reply-item v-for="reply in replys[comment.id]" :key="reply.id" :avatar="reply.user.avatar" :author="reply.user.name" :content="reply.content" :time="reply.created">
            </reply-item>
        </comments-item>


        <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item label="发表回复" prop="context" :label-width="formLabelWidth">
                    <el-input
                            type="textarea"
                            :rows="4"
                            placeholder="请输入内容"
                            v-model="ruleForm.context">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('ruleForm')">发表回复</el-button>
            </div>
        </div>
    </el-main>



        <el-dialog title="发表回复" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm1" :rules="rules" ref="ruleForm1">
                <el-form-item label="内容" prop="context" :label-width="formLabelWidth">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="ruleForm1.context">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm1('ruleForm1')">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    import Vue from 'vue'
    import comments from '@/components/comments'
    import Header from "@/components/Header";

    Vue.use(comments)

    export default {
        name: "Posts",
        components: {Header},
        data () {

            return {
                comment:0,
                dialogFormVisible:false,
                ruleForm:{
                    context:''
                },
                ruleForm1:{
                    context:''
                },
                rules:{
                    context: [
                        { required: true, message: '请输入新帖的内容', trigger: 'blur' },
                    ]
                },
                comments: [],
                replys: {},
                length:0
            }
        },
        created: function () {
            this.listComments()
        },
        watch: {
        },
        methods: {
            submitForm(formName){
                    this.$refs[formName].validate((valid)=>{

                        if(valid){
                            if (this.$store.getters.getUser.id) {
                                var userid = this.$store.getters.getUser.id

                            var obj = {
                                userid: userid,
                                mainid:this.$route.params.id,
                                content: this.ruleForm.context,
                                comments: this.length+1,
                                reply:-1
                            }

                            this.$axios.post('/posts/edit',obj,{headers:{
                                        "Authorization": localStorage.getItem("token")
                                    }}).then(response=>{
                                        
                                    // this.ruleForm.context='';
                                    // this.ruleForm.name='';
                                    this.$message.success(response.data.data)
                                    // this.listComments();
                                    location. reload()

                            })
                            }else {
                                this.$message.error("请先完成登录")
                            }

                        }
                    })
            },

            submitForm1(formName){
                this.$refs[formName].validate((valid)=>{

                    if(valid){
                        if (this.$store.getters.getUser.id) {
                            var userid = this.$store.getters.getUser.id

                            var obj = {
                                userid: userid,
                                mainid:this.$route.params.id,
                                content: this.ruleForm1.context,
                                comments: -1,
                                reply: this.comment
                            }

                            this.$axios.post('/posts/edit',obj,{headers:{
                                    "Authorization": localStorage.getItem("token")
                                }}).then(response=>{

                                // this.ruleForm.context='';
                                // this.ruleForm.name='';
                                this.dialogFormVisible=false
                                this.$message.success(response.data.data)
                                this.listComments()
                                this.$refs['ruleForm1'].resetFields();
                                // this.listComments();


                            })
                        }else {
                            this.dialogFormVisible=false
                            this.$message.error("请先完成登录")

                        }

                    }
                })
            },
            listComments () {
                let self = this
                const  mainid = this.$route.params.id
                
                this.$axios.get('/posts/'+mainid).then(data => {
debugger
                    self.comments = data.data.data
                    // self.length= Object.keys(self.comments).length
                    this.length = self.comments.length
                    console.log(self.comments)
                    if (self.comments.length > 0) {
                        self.listReply()
                    }
                })
            },
            listReply () {
                let self = this
                self.replys = {}
                if (self.comments.length < 0) {
                    return
                }
                for (let i = 0; i < self.comments.length; i++) {
                    let value = self.comments[i]
                    console.log(value)
                    const  mainid = this.$route.params.id
                    this.$axios.get('/posts/'+mainid+'/'+value.comments).then(data => {
                        console.log(data)

                        self.$set(self.replys, value.id, data ? [].concat(data.data.data) : [])
                    })
                }
            },
            handleDeleteComments(item){
                
                if(item.comments==1){
                    this.$confirm('此操作将删除该帖子, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$axios.post('/posts/deleteComments',item).then(res=>{
                            console.log(res)
                            debugger
                            this.$router.push('/mainposts/'+res.data.data)
                        })

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }else{
                    this.$confirm('此操作将删除该回复, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$axios.post('/posts/deleteComments',item).then(res=>{
                            debugger
                            console.log(res)
                            location.reload()
                        })

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }


            },
            handleDeleteReply(item){

            },
            handleClickAvatar (item) {
                console.log('点击了头像')
            },
            handleClickAuthor (item) {
                console.log('点击了用户')
            },
            handleAddReply (item) {
                this.dialogFormVisible=true;
                this.comment=item.comments;
            }
        }
    }

</script>

<style scoped>
    .zhong{
        width: 70%;
        padding-left: 200px;
        float:left;
    }
    .right{
        float:right;
        padding-left: 50px;
        padding-top: 25px;


    }
    .el-icon-edit{
        height: 150%;
        width: 150%;
    }

</style>
